* {
  box-sizing: border-box;
}
input,
textarea,
button,
select {
  outline: none;
  -webkit-appearance: none;
}

html {
  --primary-color: #1f8bff;
  --primary-opacity-0: rgba(31, 139, 255, 0);
  --primary-opacity-05: rgba(31, 139, 255, 0.05);
  --primary-opacity-1: rgba(31, 139, 255, 0.1);
  --primary-opacity-15: rgba(31, 139, 255, 0.15);
  --primary-opacity-2: rgba(31, 139, 255, 0.2);
  --primary-opacity-25: rgba(31, 139, 255, 0.25);
  --primary-opacity-3: rgba(31, 139, 255, 0.3);
  --primary-opacity-35: rgba(31, 139, 255, 0.35);
  --primary-opacity-4: rgba(31, 139, 255, 0.4);
  --primary-opacity-45: rgba(31, 139, 255, 0.45);
  --primary-opacity-5: rgba(31, 139, 255, 0.5);
  --primary-opacity-55: rgba(31, 139, 255, 0.55);
  --primary-opacity-6: rgba(31, 139, 255, 0.6);
  --primary-opacity-65: rgba(31, 139, 255, 0.65);
  --primary-opacity-7: rgba(31, 139, 255, 0.7);
  --primary-opacity-75: rgba(31, 139, 255, 0.75);
  --primary-opacity-8: rgba(31, 139, 255, 0.8);
  --primary-opacity-85: rgba(31, 139, 255, 0.85);
  --primary-opacity-9: rgba(31, 139, 255, 0.9);
  --primary-opacity-95: rgba(31, 139, 255, 0.95);
  --primary-gray: #5578a1;
  --primary-gray-opacity-0: rgba(85, 120, 161, 0);
  --primary-gray-opacity-05: rgba(85, 120, 161, 0.05);
  --primary-gray-opacity-1: rgba(85, 120, 161, 0.1);
  --primary-gray-opacity-15: rgba(85, 120, 161, 0.15);
  --primary-gray-opacity-2: rgba(85, 120, 161, 0.2);
  --primary-gray-opacity-25: rgba(85, 120, 161, 0.25);
  --primary-gray-opacity-3: rgba(85, 120, 161, 0.3);
  --primary-gray-opacity-35: rgba(85, 120, 161, 0.35);
  --primary-gray-opacity-4: rgba(85, 120, 161, 0.4);
  --primary-gray-opacity-45: rgba(85, 120, 161, 0.45);
  --primary-gray-opacity-5: rgba(85, 120, 161, 0.5);
  --primary-gray-opacity-55: rgba(85, 120, 161, 0.55);
  --primary-gray-opacity-6: rgba(85, 120, 161, 0.6);
  --primary-gray-opacity-65: rgba(85, 120, 161, 0.65);
  --primary-gray-opacity-7: rgba(85, 120, 161, 0.7);
  --primary-gray-opacity-75: rgba(85, 120, 161, 0.75);
  --primary-gray-opacity-8: rgba(85, 120, 161, 0.8);
  --primary-gray-opacity-85: rgba(85, 120, 161, 0.85);
  --primary-gray-opacity-9: rgba(85, 120, 161, 0.9);
  --primary-gray-opacity-95: rgba(85, 120, 161, 0.95);
  --primary-dark: #32465e;
  --analogous-color: #33bbff;
  --analogous-opacity-1: rgba(51, 187, 255, 0.1);
  --analogous-opacity-2: rgba(51, 187, 255, 0.2);
  --analogous-opacity-3: rgba(51, 187, 255, 0.3);
  --analogous-opacity-4: rgba(51, 187, 255, 0.4);
  --analogous-opacity-5: rgba(51, 187, 255, 0.5);
  --analogous-opacity-6: rgba(51, 187, 255, 0.6);
  --analogous-opacity-7: rgba(51, 187, 255, 0.7);
  --analogous-opacity-8: rgba(51, 187, 255, 0.8);
  --analogous-opacity-9: rgba(51, 187, 255, 0.9);
  --white-default: #fff;
  --white-opacity-0: rgba(255, 255, 255, 0);
  --white-opacity-05: rgba(255, 255, 255, 0.05);
  --white-opacity-1: rgba(255, 255, 255, 0.1);
  --white-opacity-15: rgba(255, 255, 255, 0.15);
  --white-opacity-2: rgba(255, 255, 255, 0.2);
  --white-opacity-25: rgba(255, 255, 255, 0.25);
  --white-opacity-3: rgba(255, 255, 255, 0.3);
  --white-opacity-35: rgba(255, 255, 255, 0.35);
  --white-opacity-4: rgba(255, 255, 255, 0.4);
  --white-opacity-45: rgba(255, 255, 255, 0.45);
  --white-opacity-5: rgba(255, 255, 255, 0.5);
  --white-opacity-55: rgba(255, 255, 255, 0.55);
  --white-opacity-6: rgba(255, 255, 255, 0.6);
  --white-opacity-65: rgba(255, 255, 255, 0.65);
  --white-opacity-7: rgba(255, 255, 255, 0.7);
  --white-opacity-75: rgba(255, 255, 255, 0.75);
  --white-opacity-8: rgba(255, 255, 255, 0.8);
  --white-opacity-85: rgba(255, 255, 255, 0.85);
  --white-opacity-9: rgba(255, 255, 255, 0.9);
  --white-opacity-95: rgba(255, 255, 255, 0.95);
  --success-color: #67c23a;
  --success-opacity-1: rgba(103, 194, 58, 0.1);
  --success-opacity-2: rgba(103, 194, 58, 0.2);
  --success-opacity-3: rgba(103, 194, 58, 0.3);
  --success-opacity-4: rgba(103, 194, 58, 0.4);
  --success-opacity-5: rgba(103, 194, 58, 0.5);
  --success-opacity-6: rgba(103, 194, 58, 0.6);
  --success-opacity-7: rgba(103, 194, 58, 0.7);
  --success-opacity-8: rgba(103, 194, 58, 0.8);
  --success-opacity-9: rgba(103, 194, 58, 0.9);
  --warning-color: #e6a23c;
  --warning-opacity-1: rgba(230, 162, 60, 0.1);
  --warning-opacity-2: rgba(230, 162, 60, 0.2);
  --warning-opacity-3: rgba(230, 162, 60, 0.3);
  --warning-opacity-4: rgba(230, 162, 60, 0.4);
  --warning-opacity-5: rgba(230, 162, 60, 0.5);
  --warning-opacity-6: rgba(230, 162, 60, 0.6);
  --warning-opacity-7: rgba(230, 162, 60, 0.7);
  --warning-opacity-8: rgba(230, 162, 60, 0.8);
  --warning-opacity-9: rgba(230, 162, 60, 0.9);
  --error-color: #f56c6c;
  --error-opacity-1: rgba(245, 108, 108, 0.1);
  --error-opacity-2: rgba(245, 108, 108, 0.2);
  --error-opacity-3: rgba(245, 108, 108, 0.3);
  --error-opacity-4: rgba(245, 108, 108, 0.4);
  --error-opacity-5: rgba(245, 108, 108, 0.5);
  --error-opacity-6: rgba(245, 108, 108, 0.6);
  --error-opacity-7: rgba(245, 108, 108, 0.7);
  --error-opacity-8: rgba(245, 108, 108, 0.8);
  --error-opacity-9: rgba(245, 108, 108, 0.9);
  --gray-0: #001e3c;
  --gray-opacity-0: rgba(0, 30, 60, 0);
  --gray-opacity-05: rgba(0, 30, 60, 0.05);
  --gray-opacity-1: rgba(0, 30, 60, 0.1);
  --gray-opacity-15: rgba(0, 30, 60, 0.15);
  --gray-opacity-2: rgba(0, 30, 60, 0.2);
  --gray-opacity-25: rgba(0, 30, 60, 0.25);
  --gray-opacity-3: rgba(0, 30, 60, 0.3);
  --gray-opacity-35: rgba(0, 30, 60, 0.35);
  --gray-opacity-4: rgba(0, 30, 60, 0.4);
  --gray-opacity-45: rgba(0, 30, 60, 0.45);
  --gray-opacity-5: rgba(0, 30, 60, 0.5);
  --gray-opacity-55: rgba(0, 30, 60, 0.55);
  --gray-opacity-6: rgba(0, 30, 60, 0.6);
  --gray-opacity-65: rgba(0, 30, 60, 0.65);
  --gray-opacity-7: rgba(0, 30, 60, 0.7);
  --gray-opacity-75: rgba(0, 30, 60, 0.75);
  --gray-opacity-8: rgba(0, 30, 60, 0.8);
  --gray-opacity-85: rgba(0, 30, 60, 0.85);
  --gray-opacity-9: rgba(0, 30, 60, 0.9);
  --gray-opacity-95: rgba(0, 30, 60, 0.95);
  --gray-1: #324057;
  --gray-2: #475669;
  --gray-3: #8492a6;
  --gray-4: #99a9bf;
  --gray-5: #c0ccda;
  --gray-6: #d3dce6;
  --gray-7: #e5e9f2;
  --gray-8: #eff2f7;
  --gray-9: #f2f7fc;
  --text-color: #324057;
  --text-color-2: #475669;
  --text-color-3: #758397;
  --text-color-4: #8492a6;
  --border-color-0: #cad4e0;
  --border-color: #d3dce6;
  --border-color-2: #e5e9f2;
  --border-color-3: #eff2f7;
  --bg-color: #e8f0fa;
  --text-shadow: rgba(255, 255, 255, 0.6);
}
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.bottom-0 {
  bottom: 0;
}
.right-0 {
  right: 0;
}
.absolute {
  position: absolute;
}
.r-full {
  border-radius: 9999px;
}
.ml-10 {
  margin-left: 1.25rem;
}
.flex-col {
  flex-direction: column;
}
.justify-center {
  justify-content: center;
}
.flex-col {
  flex-direction: column;
}
.main-title {
  font-size: 3em;
  font-family: PangMenZhengDaoBiaoTiTi;
  font-style: italic;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.absolute {
  position: absolute;
}
.text-xs {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.gx-5 {
  column-gap: 0.625rem;
}
.justify-end {
  justify-content: end;
}
.flex-grow {
  flex-grow: 1;
}
.items-center {
  align-items: center;
}
.items-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.justify-center {
  justify-content: center;
}
.flex {
  display: flex;
}
.px-8 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-4 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.relative {
  position: relative;
}

.container,
.container-np {
  max-width: 1596px;
  margin-left: auto;
  margin-right: auto;
}
.px-20 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.rankings-wrapper a {
  text-decoration: none;
  color: #fff;
}
.r-5 {
  border-radius: 0.625rem;
}
.mb-10 {
  margin-bottom: 1.25rem;
}
.pr-16 {
  padding-right: 2rem;
}
.bg-blur {
  -webkit-backdrop-filter: blur(6px) brightness(103%);
  backdrop-filter: blur(6px) brightness(103%);
}
.r-full {
  border-radius: 9999px;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.place-self-end {
  place-self: end;
}
.justify-center {
  justify-content: center;
}
.-mt-10 {
  margin-top: -1.25rem;
}
/*背景*/
body {
  background-color: rgb(207 75 75 / 85%);
}
/*
按钮
*/
button.btn {
  background: var(--primary-opacity-15)
    linear-gradient(var(--white-opacity-0) 65%, var(--white-opacity-75));
  box-shadow: 0 0 0 1px var(--white-default) inset,
    0 8px 10px var(--primary-gray-opacity-05),
    0 8px 10px var(--primary-opacity-2), 0 0 5px var(--primary-opacity-2);
  border-radius: 9em;
  border: none;
  font-size: 16px;
  color: var(--primary-color);
  cursor: pointer;
  transition: 0.25s;
  overflow: hidden;
}
button.btn:before {
  content: "";
  display: block;
  margin: 0 0.7em;
  height: 50%;
  box-shadow: 0 1px #fff inset;
  background: linear-gradient(var(--white-default), var(--white-opacity-3));
  border-radius: 9em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
button.btn:hover {
  background-color: var(--primary-opacity-3);
  box-shadow: 0 0 0 1px var(--white-default) inset,
    0 8px 10px var(--primary-gray-opacity-05),
    0 10px 10px var(--primary-opacity-3), 0 0 10px var(--primary-opacity-2);
}
button.btn .text {
  white-space: nowrap;
  opacity: 0.99;
  display: inline-block;
  transition: 0.5s;
}
.text-bulge-primary {
  text-shadow: -1px -1px var(--white-opacity-5),
    2px 2px 2px var(--primary-opacity-3);
}

/*暗色按钮*/
.generate {
  position: relative;
  pointer-events: all;
  cursor: pointer;
  background: linear-gradient(transparent 70%, rgba(255, 255, 255, 0.3));
  border-radius: 9em;
  color: #fff;
  box-shadow: 0 0 0 1px #0009 inset, 0 0 0 2px var(--white-opacity-2) inset,
    0 0.75em 1.5em var(--gray-opacity-4);
  -webkit-backdrop-filter: brightness(30%) saturate(250%) blur(4px);
  backdrop-filter: brightness(40%) saturate(250%) blur(4px);
  padding: 0.5em 1.5em;
  font-size: 17px;
  text-shadow: 0 -1px var(--gray-opacity-6);
  border: none;
  transition: background-color 0.2s,
    transform cubic-bezier(0.4, 1.3, 0.6, 1) 0.75s;
}
.generate:before {
  content: "";
  position: absolute;
  left: 0.55em;
  top: 1px;
  right: 0.55em;
  height: 45%;
  border-radius: 9em;
  background: linear-gradient(
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.2)
  );
  box-shadow: 0 1px #ffffff4d inset;
  z-index: -1;
}
.generate:hover {
  background-color: #fff3;
}

/*分享按钮*/
.share-modal {
  button {
    cursor: pointer;
    font-size: 16px;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    border-radius: 50%;
    border: none;
    margin: 0 0.5em 0 0.375em;
    color: #fff;
    position: relative;
  }
  button.likes {
    background: radial-gradient(
      circle farthest-corner at 50% 0%,
      #ff9600 0,
      #ff5349 100%
    );
    box-shadow: 0 0 0 25px #ff534900, 0 0 0 20px #ff534900, 0 0 #ff534900 inset,
      0 10px 10px -2px #ff534999;
    transition: 1s;
  }
  button.qzone {
    background: radial-gradient(
      circle farthest-corner at 50% 0%,
      #ffe000 0,
      #ffa000 100%
    );
    box-shadow: 0 10px 10px -2px #fa09;
  }
  button.qq {
    background: radial-gradient(
      circle farthest-corner at 50% 0%,
      #76baff 0,
      #1f8bff 100%
    );
    box-shadow: 0 10px 10px -2px #1f8bff80;
  }
  button.image {
    background: radial-gradient(
      circle farthest-corner at 50% 0%,
      #b9df64 0,
      #61be33 100%
    );
    box-shadow: 0 10px 10px -2px #60b03080;
  }
}

/*顶部导航栏*/
.container-np {
  max-width: 1596px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) and (max-width: 767px) {
  .xs\:flex-wrap {
    flex-wrap: wrap;
  }
}
.nav-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(#cdd8e9, transparent);
  z-index: 999;
  .nav {
    position: relative;
    height: 52px;
    background-image: linear-gradient(
        transparent 1px,
        #fff 1px,
        rgba(255, 255, 255, 0.3) 26px,
        rgba(255, 255, 255, 0) 26px,
        rgba(255, 255, 255, 0)
      ),
      linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65));
    background-repeat: no-repeat;
    background-position: 0 -1px, 0;
    -webkit-backdrop-filter: blur(8px) brightness(60%) saturate(600%);
    backdrop-filter: blur(8px) brightness(60%) saturate(600%);
    background-color: #d2e6ffa6;
    border-radius: 0.5em;
    margin-top: 4px;
    margin-left: 7px;
    margin-right: 7px;
    box-shadow: 0 0 0 1px var(--white-opacity-6) inset,
      0 0 0 1px var(--gray-opacity-05), 0 8px 10px var(--primary-gray-opacity-2),
      0 8px 10px var(--primary-opacity-05);
    transition: ease-out 0.35s, backdrop-filter 0.25s 0.1s,
      -webkit-backdrop-filter 0.25s 0.1s;
    .nav-content {
      height: inherit;
    }
    .mobile-menu-btn {
      width: 52px;
      height: 52px;
      border: none;
      background: none;
      padding: 0 18px 0 12px;
      opacity: 0.75;
      div {
        width: 100%;
        height: 1px;
        border-radius: 9px;
        margin: 3px 0;
        background: var(--primary-gray);
        box-shadow: 0 1px var(--white-opacity-5);
        transition: margin ease-out 0.25s 0.25s, width 0s 0.25s,
          transform ease-in 0.25s;
      }
      div:nth-child(2) {
        width: 60%;
      }
      div:nth-child(3) {
        width: 75%;
      }
    }
    .nav-content > .menu {
      width: 1%;
      height: 52px;
    }
  }
  .logo {
    padding: 0 10px;
    img {
      height: 52px;
    }
  }
  .mobile-sidebar-btn {
    width: 52px;
    height: 52px;
    border: none;
    background: none;
    padding: 0 12px;
    opacity: 0.75;
    .sidebar-icon {
      border: 1px solid var(--primary-gray);
      height: 22px;
      border-radius: 4px;
      box-shadow: 0 1px var(--white-opacity-5),
        0 1px var(--white-opacity-5) inset;
      transition: 0.5s;
      .sidebar-icon-sidebar {
        border-left: 1px solid var(--primary-gray);
        width: 40%;
        padding: 1px;
        transition: 0.5s;
        div {
          width: 7px;
          height: 1px;
          background-color: var(--primary-gray);
          margin: 2px 0;
          box-shadow: 0 1px var(--white-opacity-5);
          transition: 0.5s;
        }
      }
    }
  }
}

@media (max-width: 767.5px) {
  .nav-top .logo {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-top .nav .nav-content > .menu {
    width: 100%;
    opacity: 0;
    transform: translate(-20px);
    visibility: hidden;
    z-index: -1;
    transition: ease-out 0.35s;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .xs\:order-last {
    order: 9999;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .xs\:justify-start {
    justify-content: start;
  }
}

/*边框*/
.model-wrapper {
  padding: 7px;
  border-radius: 1.25em;
  box-shadow: 0 0 0 1px #ffffff80 inset, 0 1px #ffffff80 inset,
    0 1em 2em var(--gray-opacity-15);
  margin: 20px 0;
  .model {
    background-color: var(--white-opacity-85);
    border: 1px solid #fff;
    padding: 1.5em 3em;
    border-radius: 1em;
    --inset: 48px;
    box-shadow: 0 3px 6px var(--primary-gray-opacity-1);
  }
}

/*排名*/

.rankings-wrapper {
  --height: 458px;
  overflow: hidden;
  padding: 0.1px 0;
  background: var(--bg, var(--gray-opacity-2));
  height: var(--height);
  box-shadow: 0 1px var(--white-opacity-7);
  transition: background-color 0.5s;
  .bg {
    pointer-events: none;
    .full {
      left: -10px;
      top: -10px;
      width: calc(100% + 20px);
      height: calc(100% + 20px);
      object-fit: cover;
      filter: blur(6px);
      opacity: 0.2;
    }
    .thumbnail {
      max-height: 100%;
      -webkit-mask: radial-gradient(
        at right bottom,
        #000 0%,
        transparent 70.5%
      );
      mask: radial-gradient(at right bottom, #000 0%, transparent 70.5%);
      mask: radial-gradient(farthest-side at right center, #000, transparent),
        radial-gradient(at right bottom, #000 0%, transparent 70.5%);
    }
  }
  .card-container {
    height: calc(var(--height) - 54px);
    z-index: 1;
  }
  .rankings {
    min-width: 50%;
  }
  .place-wrapper {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px #ffffff1a;
    transition: 0.25s;
  }
  .first-place {
    height: 90px;
    background-image: linear-gradient(
        transparent 1px,
        rgba(255, 255, 255, 0.8) 1px,
        rgba(255, 255, 255, 0.2) 36px,
        transparent 0px
      ),
      linear-gradient(transparent 45px, rgba(255, 255, 255, 0.3));
    background-position: 0 -36px, 0 45px;
    background-repeat: no-repeat;
    margin-left: 48px;
    transition: 0.35s;
    .thumbnail-wrapper {
      width: 96px;
      height: 96px;
      padding: 5px;
      background: linear-gradient(#fff, transparent, rgba(255, 255, 255, 0.5));
      box-shadow: 0 0 0 1px #ffffff80 inset, 0 5px 10px var(--gray-opacity-15);
      margin-left: -48px;
      .crown {
        top: -36px;
        width: 100%;
      }
      .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .main-title {
      font-size: 32px;
      -webkit-line-clamp: 1;
    }
    .place {
      right: 10px;
      top: -1px;
    }
  }
  .first-place.active {
    background-position: 0 -1px, 0 0;
    box-shadow: 0 0 0 1px var(--white-opacity-5) inset,
      0 0 0 1px var(--gray-opacity-05), 0 10px 15px var(--gray-opacity-15);
  }
  .place {
    width: 30px;
  }
  .metas {
    text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
    opacity: 0.5;
  }
}
.main-title.type-1 {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  -webkit-mask: linear-gradient(#000 20%, rgba(0, 0, 0, 0.6) 70%) 0 0/100% 1.3em;
  mask: linear-gradient(#000 20%, rgba(0, 0, 0, 0.6) 70%) 0 0/100% 1.3em;
  text-shadow: 0.1053em 0.1053em rgba(255, 255, 255, 0.2),
    0.1842em 0.1842em 0.2em rgba(0, 0, 0, 0.2);
  line-height: 1.3em;
  margin-right: 0.3em;
  width: 100%;
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.6) 20%, #000 60%) 0 0/100% 1.3em;
  mask: linear-gradient(rgba(0, 0, 0, 0.55) 20%, #000 65%) 0 0/100% 1.3em;
  text-shadow: var(--text-shadow);
  transition: text-shadow 0.7s;
}

/*卡片*/
.post-card {
  z-index: 1;
}
.post-card-wrapper {
  --card-padding: 6px;
  --card-radius: 12px;
  cursor: pointer;
  padding: var(--card-padding);
  background: linear-gradient(
    #fff,
    transparent 20%,
    transparent 95%,
    rgba(255, 255, 255, 0.3)
  );
  border-radius: var(--card-radius);
  box-shadow: 0 0 0 1px #fffc inset, 0 1px #fff inset,
    0 0.75em 1em var(--gray-opacity-15);
  will-change: transform, box-shadow;
  .card {
    position: relative;
    overflow: hidden;
    background: var(--bg)
      radial-gradient(
        at 10% 0%,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0) 60%
      );
    border-radius: calc(var(--card-radius) - var(--card-padding) / 2 - 1px);
    padding-top: 40%;
    box-shadow: 0 0 0 1px #fffc, 0 0 0 1px #00000012 inset;
  }
  .main-title {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 38px;
    right: 16px;
    margin: 0;
    width: unset;
    color: var(--default);
    font-size: 1.75em;
    display: block;
    > div {
      margin-right: 0.3em;
    }
  }
  .img {
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 89.45%;
    -webkit-mask: radial-gradient(
        circle farthest-side at bottom,
        #000 33%,
        transparent
      ),
      linear-gradient(transparent, #000);
    mask: radial-gradient(circle farthest-side at bottom, #000 33%, transparent),
      linear-gradient(transparent, #000);
  }
  .highlight {
    position: absolute;
    display: block;
    background: radial-gradient(
        farthest-side at 100% 0%,
        rgba(255, 255, 255, 0.3),
        transparent
      )
      no-repeat 100% 100% / 35% 100%;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200%;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
    transition: transform 1s, opacity 0.5s;
  }
}

.card-container.is-dark .main-title.type-1 {
  -webkit-mask: linear-gradient(#000 20%, rgba(0, 0, 0, 0.6) 70%) 0 0/100% 1.3em;
  mask: linear-gradient(#000 20%, rgba(0, 0, 0, 0.6) 70%) 0 0/100% 1.3em;
  text-shadow: 0.1053em 0.1053em rgba(255, 255, 255, 0.2),
    0.1842em 0.1842em 0.2em rgba(0, 0, 0, 0.2);
}
.post-card-wrapper.is-dark .main-title {
  color: #fff;
}
.main-title {
  line-height: 1.3em;
  font-size: 3em;
  font-family: PangMenZhengDaoBiaoTiTi;
  font-style: italic;
}

@media (min-width: 1200px) and (max-width: 1450px),
  (min-width: 991px) and (max-width: 1160px),
  (min-width: 768px) and (max-width: 820px) {
  .post-card-wrapper .main-title {
    font-size: 1.3em;
    left: 16px;
    top: 28px;
    right: 12px;
  }
}
.block {
  display: block;
}
